<template>
  <div class="_wrap">
    <div class="chartBox">
      <subTit title="学校分布" style="margin-top: -4px;"/>
      <eChart :option="option"></eChart>
    </div>
    <div class="divider"></div> 
  </div>
</template>

<script>
  import subTit from '../components/subTit'
  export default {
    name: 'itemRightBottom',
    components: { subTit },
    data() {
      return {
        option: {}
      }
    },
    mounted() {
      let icon =
  "path://M512.584639,219.893708c40.41173,0.258019,73.19961-32.274913,73.199609-72.557634,0-40.025725-32.78788-72.559681-73.199609-72.559681-40.473163,0-73.196538,32.533956-73.196538,72.559681,0,40.089206,32.723375,72.557634,73.196538,72.557634z,m73.330666,16.396499H439.129058c-55.266258,0-91.39098,48.28336-91.390981,94.203594v220.945238c0,42.847553,60.780905,42.847553,60.780905,0V347.144224h11.782872v555.564273c0,59.179548,82.417649,57.316077,84.337434,0V582.569248h15.696162V902.96754c3.391108,60.650871,84.340506,54.817796,84.340506-0.258019V347.144224h9.800631v204.234406c0,42.837314,62.696594,42.837314,62.696594,0V330.433391c0.126962-45.72979-36.116531-94.143184-91.257876-94.143184z";
      this.option = this.getOption(icon)
    },
    methods: {
      getOption(icon){
        return {
          grid: {             
            containLabel: true,
            height: "70px",
            width: "400px",
            left: "4%",
            right:'20%',
            top: "9",
          },
          xAxis: {
            max: 100,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: {
            type: "category",
            data: ["男", "女"],
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              // margin: 10,
              fontSize: 16,
              color: "#C8CCD0",
            },
            axisPointer: {
              label: {
                show: true,
                margin: 100,
              },
            },
          },
          series: [
            {
              type: "pictorialBar",
              symbolRepeat: "fixed",
              symbolMargin: "6!",
              label: {
                normal: {
                  show: true,
                  position: "right",
                  offset: [20, 0],
                  formatter: (param) => {
                    return param.value.toFixed(0) + "%";
                  },
                  textStyle: {
                    fontSize: 16,
                    color: "#C8CCD0",
                  },
                },
              },
              symbolClip: true,
              symbolSize: [14, 28],
              symbolPosition: "start",
              // symbolOffset: [
              //   10,
              //   0
              // ],
              symbolBoundingData: 90,
              data: [
                {
                  value: 50,
                  symbol: icon,
                  itemStyle: {
                    color: "#3399FF",//男颜色
                  },
                },
                {
                  value: 40,
                  symbol: icon,
                  itemStyle: {
                    color: "#FFB936",//女颜色
                  },
                },
              ],
              z: 10,
            },
            {
              type: "pictorialBar",
              itemStyle: {
                normal: {
                  opacity: 0.2,
                },
              },
              animationDuration: 0,
              symbolRepeat: "fixed",
              symbolMargin: "6!",
              symbolSize: [14, 28],
              symbolBoundingData: 90,
              symbolPosition: "start",
              // symbolOffset: [
              //   10,
              //   0
              // ],
              data: [
                {
                  value: 100,
                  symbol: icon,
                  itemStyle: {
                    color: "#3399FF",//男颜色
                  },
                },
                {
                  value: 100,
                  symbol: icon,
                  itemStyle: {
                    color: "#FFB936",//女颜色
                  },
                },
              ],
              z: 5,
            },
          ],
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    // width: 100%; height: 100%;
    display: grid; grid-template-rows: 80px 4px auto; grid-gap: 24px;
    .divider {
      position: relative;
      top:14px;
      width: 100%;
      background: url('~@/assets/imgSchoolHouse/divider_s.svg') no-repeat;
    }
    .chartBox { height: 100px; }
    ::v-deep .tooltip {
      .item {
        display: flex; align-items: center; color: rgba(255,255,255,.8);
        .marker { visibility:hidden }
        span { color: #00FFFA; font-family: DINPro; font-size: 16px; margin: 0 6px; }
      }
    }
  }
</style>
